<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器(simple selector)</title>

        <style type="text/css">
            /* class selector */
            .wrapper {
                width: 500px ;
                height: 300px ;
                border: 2px solid blue ;
                border-radius: 5px ;
                text-align: center ;
                margin: 15px auto ; /* 先上下(15px) 后左右(auto) */
            }

            /* 伪类的使用方法是 selector:pseudo-class ，比如 .wrapper:hover ( hover 是一个 pseudo-class 名称 ) */
            .wrapper:hover {
                background-color: red ;
            }
        </style>

    </head>
    <body>

        <h3>伪类选择器(pseudo-class selector) </h3>
        <div>
            伪类选择器选择的是元素的某种状态，比如 通过 .wrapper 选择器命中的那些元素 鼠标悬浮(hover) 后的状态(status)
        </div>

        <div class="wrapper">
            <img src="yuanyeye.jpg" >
        </div>

        <div class="wrapper">
            <img src="yuanyeye.jpg" >
        </div>
        
    </body>
</html>